<!-- 平台入口 -->
<template>
  <div class="main-app">
    <!--  顶部头部信息  -->
    <div class="main-app-top">
      <span>{{route?.meta?.title}}</span>
    </div>
    <!--  中间内容信息  -->
    <div class="main-app-ctn">
      <!-- 左侧信息-->
      <div class="ctn-box ctn-left">
          <div class="ctn-box-title">
            <span>达标率</span>
          </div>
          <div class="ctn-box-base-box left-echarts-box">
            <!--  表格数据   -->
            <div class="table-item">
              <div class="filter">
                <div class="marks">
                  <img src="@/assets/icons/mark-1.png"/>
                  <span>不达标</span>
                  <img src="@/assets/icons/mark-2.png"/>
                  <span>达标</span>
                </div>
                <div class="filter-right">
                  <el-select
                      v-model="params.brand"
                      class="select"
                      placeholder="请选择品牌"
                  >
                    <el-option v-for="b in brandInfo" :value="b" :label="b"></el-option>
                  </el-select>
                  <el-config-provider :locale="locale">
                    <el-date-picker
                        class="data-pic"
                        v-model="params.create_date"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择日期"
                    />
                  </el-config-provider>
                </div>
              </div>
              <brand-and-kpi :params="params"></brand-and-kpi>
            </div>
            <!--  报表   -->
            <pass-rate-and-kpi :params="params"></pass-rate-and-kpi>
          </div>
      </div>
      <!-- 右侧报表    -->
      <div class="ctn-center">
        <!--  达标率分析    -->
        <pass-rate :params="params"></pass-rate>
        <!--  KPI全部数据    -->
        <k-p-i :params="params"></k-p-i>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Home" setup>
import KPI from "@/views/home/components/KPI.vue";
import PassRate from "@/views/home/components/passRate.vue";
import locale from 'element-plus/es/locale/lang/zh-cn';
import {useBaseStore} from "@/store";
import BrandAndKpi from "@/views/home/components/brandAndKpi.vue";
import PassRateAndKpi from "@/views/home/components/passRateAndKpi.vue";
import formatDate from "@/utils/baseCfg";
const {brandInfo} = useBaseStore()
interface interfaceParam{
  brand: number
  create_date: string
}
let params = reactive<interfaceParam>({
  brand: brandInfo[0],
  status: 0, //默认一直为0
  create_date: formatDate(new Date())
})
// 获取路由信息
const route = useRoute()
</script>

<style lang="scss">
@use 'home';
</style>